<template>

  <div class="home">
   <div id="demo" class="carousel slide" data-ride="carousel">
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <img class="navbar-brand" src="../img/logo2.jpg" id="a1">
  <ul class="navbar-nav">

    <li class="nav-item">
      <a class="nav-link" href="#">欢迎{{$store.state.Login.name}}登录</a>
    </li>
  </ul>
</nav>
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
       <img src="../img/a.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/c.jpg">
    </div>
    <div class="carousel-item">
      <img src="../img/d.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
   </div>


  <div class="container" style="height:100px;width:300px;position: absolute;left:400px;top: 560px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jbxx">
      <br>
      <span class="btn btn-default btn-xs">基本信息</span>
    </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left: 800px;top: 560px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="jzs">
      <br>
      <span class="btn btn-default btn-xs">家族史</span>
      </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left:400px;top: 700px;">
    
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="bls">
      <br>
      <span class="btn btn-default btn-xs">病例史</span>
      </button>
  </div>


  <br><br>
  <div class="container" style="height:100px;width:300px;position: absolute;left:800px;top: 700px;">
    <button type="button" class="btn btn-default btn-lg" style="height:100px;width:300px" @click="gms">
      <br>
      <span class="btn btn-default btn-xs">过敏史</span>
      </button>
  </div>
  <br><br>
  <el-dialog title="用户基本信息" :visible.sync="dialogVisible">
  <el-form :model="$store.state.Login">
    <el-form-item label="档案号" >
      <el-text v-text="$store.state.Login.fileNumber" readonly="readonly"></el-text>
    </el-form-item>
    <el-form-item label="姓名" >
      <el-text v-text="$store.state.Login.name"></el-text>
    </el-form-item>
    <el-form-item label="身份证号" >
      <el-text v-text="$store.state.Login.idCard"></el-text>
    </el-form-item>
  </el-form>
</el-dialog>
  <el-dialog title="家族史" :visible.sync="dialogVisible1">
  <el-form :model="jzls">
    <el-form-item label="家族史" >
      <el-text  v-text="jzls.familyHistory" readonly="readonly"></el-text>
    </el-form-item>
  </el-form>
</el-dialog>
  <el-dialog title="病例史" :visible.sync="dialogVisible2">
  <el-form :model="jzls">
    <el-form-item label="病例史" >
      <el-text  v-text="jzls.allergicHistory" readonly="readonly"></el-text>
    </el-form-item>
  </el-form>
</el-dialog>
<el-dialog title="过敏史" :visible.sync="dialogVisible3">
  <el-form :model="jzls">
    <el-form-item label="过敏史" >
      <el-text  v-text="jzls.medicalHistory" readonly="readonly"></el-text>
    </el-form-item>
  </el-form>
</el-dialog>
  </div> 
</template>


  <script>
  import axios from 'axios'
  export default {
    data() {
      return {
        dialogVisible:false,
        dialogVisible1:false,
        dialogVisible2:false,
        dialogVisible3:false,
        form:{
          fileNumber:'',
          name:'',
          idCard:''
        },
        jzls:{
familyHistory:'',
medicalHistory:'',
allergicHistory:''
        }
      }
    },
    methods:{
        jbxx(){
         this.dialogVisible=true
        },
        jzs(){
         this.dialogVisible1=true
        },
        bls(){
         this.dialogVisible2=true
        },
        gms(){
         this.dialogVisible3=true
        }
    },
    created(){
      axios.post("http://localhost:8085/jzsshow",{tMemberId:this.$store.state.Login.id}).then((response)=>{
        this.jzls=response.data
        console.log(this.jzls)
    })
    }
}
  </script>
  <style>
#a1{
  width: 35px;
  height: 40px;
}
</style>